<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/web/common.jsp" %>    
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自适应显示多个点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .info-tip {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            background-color: #fff;
            height: 35px;
            text-align: center;
        }
    </style>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.4&key=9ad973109baca85826bf635c4d2a765d&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>

<div class="info-tip">
	<label>客户具体地址</label>	
    <input type="text" id="address"/>
	<input type="button" id="btn1" value="查看网点"/><br/>
	<label>城市网点分布</label>
    <input type="text" id="city" value=""/>
    <input type="button" id="btn" value="查看网点"/>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13
    });    
    map.clearMap();  // 清除地图覆盖物
    var markers=${storeListJson}
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for (var i = 0, marker; i < markers.length; i++) {
        var marker = new AMap.Marker({
            position:[markers[i].longitude,markers[i].latitude],
            map: map
        });
        marker.content = markers[i].storename;
        marker.on('click', markerClick);
    }
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    AMap.event.addDomListener(document.getElementById('btn'), 'click', function() {
        var cityName = document.getElementById('city').value;
        if (!cityName) {
            cityName = '六安市';
        }
        map.setCity(cityName);
    });
    document.getElementById("btn1").onclick=function(){
        var geocoder = new AMap.Geocoder({
            radius: 1000 //范围，默认：500
        });
        geocoder.getLocation(document.getElementById("address").value, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    };
    
    function addMarker(d){
    	var marker = new AMap.Marker({
            map: map,
            position: [ d.location.getLng(),  d.location.getLat()]
        });
        var infoWindow = new AMap.InfoWindow({
            content: '客户',
            offset: {x: 0, y: -30}
        });
     	infoWindow.open(map, marker.getPosition());
    }
    
    function geocoder_CallBack(data) {
        var resultStr = "";
        var geocode = data.geocodes;
        for (var i = 0; i < geocode.length; i++) {
        	addMarker(geocode[i]);
            map.setZoomAndCenter(14, [geocode[i].location.getLng(), geocode[i].location.getLat()]);
        }
    }
   
</script>
</body>
</html>